<template>
  <div class="assessment-four">
    <div class="head item">
      <div class="sort">排名</div>
      <div class="class-name">专班名称</div>
      <div class="captain">队长</div>
      <div class="score">成绩</div>
    </div>

    <div class="scroll-box">
      <div class="scroll-list" :class="{'scroll-length': list.length > 4}">
        <div class="body item"
          v-for="(item, index) in list"
          :key="index">
          <div class="sort" :class="{
            'first-sort': item.index === 0,
            'two-sort': item.index === 1,
            'three-sort': item.index === 2,
          }">{{ item.index > 2 ? item.index + 1 : ' '}}</div>
          <div class="class-name">{{ item.groupName }}</div>
          <div class="captain">{{ item.leaderName }}</div>
          <div class="score">{{ item.score }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import cockpitApi from '@/api/investment/cockpit'

export default {
  name: "assessment",
  props: ['times'],
  watch: {
    times: {
      handler(newVal) {
        this.paramsObj.searchBeginTime = newVal && newVal[0]
        this.paramsObj.searchEndTime = newVal && newVal[1]

        this.initList()
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      paramsObj: {
        searchBeginTime: "",
        searchEndTime: ""
      },
      list: []
    }
  },
  methods: {
    async initList() {
      const {data} = await cockpitApi.getAssessmentTable(this.paramsObj)
      
      let arr = data.map((item, index) => {
        return {
          index: index,
          ...item
        }
      })

      if(arr.length > 4) {
        this.list = [...arr, ...arr]
      } else {
        this.list = arr
      }
   
    }
  }
}
</script>

<style lang="scss" scoped>
.assessment-four {
  padding: 0.938vw 0 0;
  .head {
    border-bottom: 0.104vw solid #6187E4;
    background-color: #2A4078;
    font-size: 0.938vw;
    margin-bottom: 0.208vw;
    .sort {
      position: relative;
      &::before {
        position: absolute;
        left: 0.26vw;
        top: 0vw;
        content: '';
        display: inline-block;
        border-top: 0.26vw solid #EBB670;
        border-bottom: 0.26vw solid transparent;
        border-left: 0.26vw solid #EBB670;
        border-right: 0.26vw solid transparent;
      }
    }
  }
  .item {
    display: flex;
    width: 20.833vw;
    height: 1.979vw;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    color: #AFBED8;
    .class-name {
      flex: 1;
    }
    .sort {
      width: 5.729vw;
    }
    .captain {
      width: 4.167vw;
    }
    .score {
      width: 4.167vw;
    }
  }
  .scroll-box {
    height: 9.375vw;
    overflow: hidden;
  }
  .scroll-length {
    padding-inline-start: 0; /* 去除列表默认的内边距 */
    animation: scrollList 5s linear infinite; /* 使用动画来实现列表的自动滚动 */
    &:hover {
      animation-play-state: paused;
    }
  }
  .scroll-length.stop {
    animation-play-state: paused;
  }

  @keyframes scrollList {
    0% { transform: translateY(0); } /* 初始位置 */
    100% { transform: translateY(-50%); } /* 在5秒内向上滚动100%的高度 */
  }
  .body {
    background: #27385E;
    border: 0.052vw solid #415C88;
    border-top: 0;
    font-size: 0.729vw;
    &:nth-child(2n) {
      background: #1F3052;
    }
    &:nth-child(1) {
      border-top: 0.052vw solid #415C88;
    }
    .sort {
      color: #DDE5F3;
      font-size: 1.042vw;
      position: relative;
      &::before {
        position: absolute;
        left: 0.26vw;
        top: 0vw;
        content: '';
        display: inline-block;
        border-top: 0.26vw solid #6E87C5;
        border-bottom: 0.26vw solid transparent;
        border-left: 0.26vw solid #6E87C5;
        border-right: 0.26vw solid transparent;
      }
    }
    .first-sort {
      &::after {
        content: '';
        display: inline-block;
        width: 2.552vw;
        height: 1.042vw;
        background: url('~@/assets/cockpit/first.png') no-repeat;
        background-size: 42px 20px;
      }
    }
    .two-sort {
      &::after {
        content: '';
        display: inline-block;
        width: 2.552vw;
        height: 1.042vw;
        background: url('~@/assets/cockpit/two.png') no-repeat;
        background-size: 42px 20px;
      }
    }
    .three-sort {
      &::after {
        content: '';
        display: inline-block;
        width: 2.552vw;
        height: 1.042vw;
        background: url('~@/assets/cockpit/three.png') no-repeat;
        background-size: 42px 20px;
      }
    }
    .class-name {
      text-align: left;
      padding-left: 0.26vw;
    }
  }
}
</style>
